<template>
  <div class="app-container">
    <el-alert :title="'收到' + newSuggestion + '条反馈'" type="info" close-text="关闭" >
    </el-alert>
    <el-card class="box-card">

      <div slot="header" class="clearfix">
        <span>用户反馈</span>
        <!-- <span style="margin-left: 600px;"></span> -->
        <el-button style="float: right; padding: 3px 0" type="text" @click="seeScoreForm">总体打分</el-button>
        <el-button style="float: right; padding: 3px 0; margin-right:10px;" type="text"
          @click="getSuggestionByPage">刷新</el-button>
      </div>

      <el-collapse>

        <el-collapse-item title="反馈信息" name="2">
          <x-table :config="tableConfig" :data="tableData" :page="page" :load="getSuggestionByPage" />
        </el-collapse-item>

        <el-collapse-item title="用户打分" name="1">
          <div style="width: auto;">
            非常满意<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
            <div style="margin-top: 10px;">满意<el-progress :text-inside="true" :stroke-width="24" :percentage="100"
                status="success" type="line"></el-progress></div>
            <div style="margin-top: 10px;">欠佳<el-progress :text-inside="true" :stroke-width="22" :percentage="80"
                status="warning"></el-progress></div>
            <div style="margin-top: 10px;">不满意<el-progress :text-inside="true" :stroke-width="20" :percentage="50"
                status="exception"></el-progress></div>
          </div>
        </el-collapse-item>

        <!-- <el-collapse-item title="待定" name="3">
          <div>简化流程：设计简洁直观的操作流程；</div>
          <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
          <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
        </el-collapse-item> -->

      </el-collapse>
    </el-card>

    <el-dialog title="总体打分" :visible="showScoreForm" @close="shutDownScore" center width="30%">
      <el-progress type="dashboard" :percentage="percentage" :color="colors" style="margin-left: 132px;"></el-progress>
      <div style="margin-left: 132px;margin-top: 20px;">评分人数：{{ scoringNumber }}人</div>
    </el-dialog>

    <replyForm v-if="showReplyForm" @close="closeDialog" :id="propId" :formData2="formData"></replyForm>

  </div>
</template>
  
<script>
import { getSuggestionByPage, delSuggestionById, getSuggestionDetail } from '@/api/suggestion'
import { getToken } from '@/utils/auth'
import replyForm from './replyForm.vue'

export default {
  components: {
    replyForm
  },
  data() {
    return {
      newSuggestion: 15,
      showReplyForm: false,
      showScoreForm: false,
      percentage: 80,
      colors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ],
      scoringNumber: 15487,

      loading: 0,
      tableData: [],
      page: {
        pageSizes: [3, 5],
        pageSize: 3,
        pageNum: 1,
        total: 0
      },
      searchData: {},
      propId: '',
      formData: {}
    }
  },

  computed: {
    tableConfig() {
      const _this = this
      return {
        search: true,
        reset: true,
        stripe: false,
        
        highlightCurrentRow: true,
        rowClick: node => _this.$emit('cellClick', node),
        column: [
          { label: '用户名', name: 'username', search: false, xType: 'input' },
          { label: '反馈内容', name: 'content', search: false, xType: 'input' }
        ],
        operate: [
          { text: '回复', show: true, click: data => this.getSuggestionDetail(data) },
          { text: '删除', show: true, click: _this.del },
        ]
      }
    }
  },

  mounted() {
    this.getSuggestionByPage()
  },

  methods: {
    getSuggestionDetail(data) {
      this.loading++
      getSuggestionDetail(data.id, getToken()).then(res => {
        console.log('getSuggestionDetail' + res.result)
        this.formData = res.result
        this.showReplyForm = true
      }).catch(e => console.error(e)).finally(() => this.loading--)
    },
    closeDialog() {
      this.showReplyForm = false
    },
    seeScoreForm() {
      this.showScoreForm = true
    },
    shutDownScore() {
      this.showScoreForm = false
    },

    getSuggestionByPage() {
      this.loading++
      getSuggestionByPage(this.searchData, this.page.pageNum, this.page.pageSize, getToken()).then(res => {
        console.log("getSuggestionByPage" + res)
        this.tableData = res.result.records
        this.page.total = res.result.total
      }).catch(e => console.error(e)).finally(() => this.loading--)
    },
    del(data) {
      this.delConfirm().then(() => {
        this.loading++
        delSuggestionById(data.id, getToken()).then(res => {
          console.log(data.id + 'delSuggestionById' + res)
          this.$message.success(res.message)
          this.getSuggestionByPage()
        }).catch(e => console.log(e)).finally(() => this.loading--)
      }).catch(e => console.log(e))
    },
    reply(data) {

    }
  },

  watch: {

  }

}
</script>
  
  